<template>
  <a-modal
    :visible="modelValue"
    top="10vh"
    width="80%"
    :align-center="false"
    :ok-loading="loading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    @before-open="beforeOpen"
  >
    <template #title> 页面配置 </template>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="form"
      auto-label-width
      :rules="rules"
    >
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="chromeSerialAppId" label="插件ID">
            <a-input v-model="form.chromeSerialAppId" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="pluginStatus" label="插件状态">
            <!-- TODO: DELETE -->
            <a-select v-model="form.pluginStatus" placeholder="请选择">
              <a-option value="1">有效</a-option>
              <a-option value="2">无效</a-option>
            </a-select>
            <dict-select
              v-model="form.pluginStatus"
              allow-clear
              dict-type="MMS_DATA_SECRET_LEVEL"
              placeholder="请选择"
            ></dict-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="portName" label="串口">
            <a-select v-model="form.portName" placeholder="请选择">
              <a-option value="1">1</a-option>
              <a-option value="2">2</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="bitRate" label="波特率">
            <a-select v-model="form.bitRate" placeholder="请选择">
              <a-option :value="110">100</a-option>
              <a-option :value="300">300</a-option>
              <a-option :value="600">600</a-option>
              <a-option :value="1200">1200</a-option>
              <a-option :value="2400">2400</a-option>
              <a-option :value="4800">4800</a-option>
              <a-option :value="9600">9600</a-option>
              <a-option :value="14400">14400</a-option>
              <a-option :value="19200">19200</a-option>
              <a-option :value="38400">38400</a-option>
              <a-option :value="57600">57600</a-option>
              <a-option :value="115200">115200</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="dataBits" label="数据位">
            <a-select v-model="form.dataBits" placeholder="请选择">
              <a-option value="seven">7</a-option>
              <a-option value="eight">8</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="parityBit" label="校验位">
            <a-select v-model="form.parityBit" placeholder="请选择">
              <a-option value="no">no</a-option>
              <a-option value="odd">odd</a-option>
              <a-option value="even">even</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="stopBits" label="停止位">
            <a-select v-model="form.stopBits" placeholder="请选择">
              <a-option value="one">1</a-option>
              <a-option value="two">2</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="characterSet" label="字符集">
            <a-select v-model="form.characterSet" placeholder="请选择">
              <a-option value="utf-8">utf-8</a-option>
              <a-option value="gbk">gbk</a-option>
              <a-option value="none">无</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item field="portDesc" label="打开的串口">
            <a-input v-model="form.portDesc" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item field="attribute01" label="接收的数据">
            <a-input v-model="form.attribute01" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { savePmsSerialConfig } from '@/api/purchaseArrival/threeCodeVerification';
  import { Message } from '@arco-design/web-vue';
  import { onMounted, reactive, ref } from 'vue';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    baseData: {
      type: Object,
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      default: () => {},
    },
  });
  const emits = defineEmits(['update:modelValue', 'updateConfig']);
  const cancel = () => {
    emits('update:modelValue', false);
  };

  // const { cancel } = useModelFun();
  const formRef = ref(null);
  const loading = ref(false);
  const form = reactive({
    id: null,
    pluginStatus: null,
    portName: null,
    portDesc: null,
    bitRate: null,
    dataBits: null,
    parityBit: null,
    stopBits: null,
    characterSet: null,
    attribute01: null,
    chromeSerialAppId: null,
  });
  const rules = {
    value7: [
      {
        required: true,
        message: '发货日期必填',
      },
    ],
  };
  const handleSubmit = async () => {
    const validate = await formRef.value.validate();
    if (validate) return;
    loading.value = true;
    try {
      await savePmsSerialConfig(form);
      Message.success({
        content: '保存成功！',
        duration: 5 * 1000,
      });
      loading.value = false;
      cancel();
      emits('updateConfig', form);
    } catch (error) {
      console.log(error);
      loading.value = false;
    }
  };
  // const handleOk = () => {
  //   cancel();
  // };
  const handleCancel = () => {
    cancel();
  };

  const beforeOpen = () => {
    formRef.value.resetFields();
  };
  onMounted(() => {
    Object.keys(form).forEach((key) => {
      form[key] = props.baseData[key];
    });
  });
</script>
